<template>
     <Modal  v-model="data" :title="title" @on-ok="ok" @on-cancel="cancel" :width="modalWidth">
       <Form  ref="form" :model="form" :label-width="70" :rules="userFormValidate">
         <Form-item label="组织机构" prop="depTree">
                     <department-tree-choose @on-change="handleSelectDepTree" ref="depTree"></department-tree-choose>
                        <Input v-model="form.depTree" v-show="false" placeholder="" style="width: 300px" />

                </Form-item> 
                    <FormItem label="页面名称" class="designItem" prop="name">
          <Input v-model="form.name" autocomplete="off" />
        </FormItem>
        </Form>  
         <slot></slot>
    </Modal>
</template>

<script>
import departmentTreeChoose from "@/views/my-components/xboot/department-tree-choose";
export default {
name:'ui-design-add',
components:{
     departmentTreeChoose
},
  props: {
    // 对话框标题
    title: {
      type: String,
      default: "新建页面"
    },
    // 对话框显示隐藏
    value: {
      type: Boolean,
      default: false
    },
    // 对话框宽度，高度自适应
    modalWidth: {
      type: Number,
      default: "520"
    }
  },
  data() {
    return {
      data: this.value,
      form: {
                 depTree:null,
                 name:''
                },
                 userFormValidate: {
                    depTree: [
                        { required: true, message: "组织机构不能为空", trigger: "blur" }
                    ],
                    name: [
                        { required: true, message: "页面名称不能为空", trigger: "blur" }
                    ],
                },
    };
  },
  watch: {
    value(val) {
      this.data = val;
    }
  },
  methods: {
    ok() {
      this.$emit("changeVal", {modal:false,button:true});
    },
    cancel() {
      this.$emit("changeVal", {modal:false,button:false});
    },
      handleSelectDepTree(v) {
                this.form.depTree = v;
            },
  }
}
</script>
<style lang="less" scoped>
.split-atrr{
  width: 100%;
  height: 100%;
}
.designItem{
  margin-bottom:10px ;
}
</style>